<template>
    <div class="container-box">
        <el-card class="mb-16px">
            <CommonTabs v-model:active="active" background="" :tabs="tabs" @change="onTabClick" />
        </el-card>
        <el-card>
            <keep-alive>
                <component :type="active" :is="components[active as keyof typeof components]" />
            </keep-alive>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CommonTabs from '@/components/commonTabs/index.vue'
import RechargeComponent from './components/recharge-component.vue'
import TransferComponent from './components/transfer-component.vue'
import WithdrawComponent from './components/withdraw-component.vue'

const active = ref(0)
const tabs = ref([
    {
        name: '充值',
        id: 0,
    },
    {
        name: '转账',
        id: 1
    },
    {
        name: '提现',
        id: 2
    }
])
const components = {
    0: RechargeComponent,
    1: TransferComponent,
    2: WithdrawComponent
}

const onTabClick = (ev: number) => {
    console.log(ev)
}
</script>
<style lang="scss" scoped>
.container-box {
    padding: 20px;
}
</style>
